/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: soubao-java 2020-07-22 $
 */<template>
  <div>
    <div
      id="explanation"
      class="explanation"
      style="color: rgb(85, 85, 85); background-color: rgb(243, 244, 244); width: 98%; height: 100%;"
    >
      <div class="bckopa-tips">
        <div class="title">
          <img src="@/static/images/handd.png" alt />
          <h4 title="提示相关设置操作时应注意的要点">操作提示</h4>
        </div>
        <ul>
          <li>设置快递100key用于跟踪查询物流信息</li>
          <li>快递鸟提供电子面单接口, 请从快递鸟注册账户, 并在其用户管理后台获取相关信息。</li>
        </ul>
      </div>
      <span title="收起提示" id="explanationZoom" style="display: block;"></span>
    </div>
    <form :model="form" class="form-horizontal" id="handleposition" method="post">
      <div class="ncap-form-default">
        <dl class="row">
          <dt class="tit">
            <label>快递方式</label>
          </dt>
          <dd class="opt">
            <el-radio v-model="form.express_switch" label="0">快递100</el-radio>
            <el-radio v-model="form.express_switch" label="1">快递鸟</el-radio>
          </dd>
        </dl>
        <dl class="row" v-if="form.express_switch == 0">
          <dt class="tit">
            <label>客户授权Key</label>
          </dt>
          <dd class="opt">
            <input
              v-model="form.kd100_key"
              type="text"
              name="title"
              id="title"
              value
              class="input-txt"
            />
            <span class="err" id="err_title"></span>
            <p class="notic">快递100</p>
          </dd>
        </dl>
        <dl class="row" v-if="form.express_switch == 0">
          <dt class="tit">
            <label>实时查询customer</label>
          </dt>
          <dd class="opt">
            <input
              v-model="form.kd100_customer"
              type="text"
              name="title"
              id="title"
              value
              class="input-txt"
            />
            <span class="err" id="err_title"></span>
            <p class="notic">快递100</p>
          </dd>
        </dl>
        <dl class="row" v-if="form.express_switch == 0">
          <dt class="tit">
            <label>测试快递100</label>
          </dt>
          <dd class="opt">
            <el-select v-model="form.shipping_code" size="mini" placeholder="请选择快递公司">
              <el-option label="请选择快递公司" value="0"></el-option>
              <el-option label="顺丰快递(shunfeng)" value="shunfeng"></el-option>
              <el-option label="圆通快递(yuantong)" value="yuantong"></el-option>
              <el-option label="韵达快递(yunda)" value="yunda"></el-option>
              <el-option label="中通快递(zhongtong)" value="zhongtong"></el-option>
              <el-option label="百世汇通快递(huitongkuaidi)" value="huitongkuaidi"></el-option>
            </el-select>
            <input v-model="invoice_no" class="input-txt" type="text" placeholder="请填写物流单号" />
            <input value="测试" class="input-btn" @click="getExpress()" type="button" />
          </dd>
        </dl>
        <dl class="row" v-if="form.express_switch == 1">
          <dt class="tit">
            <label>商户ID</label>
          </dt>
          <dd class="opt">
            <input
              v-model="form.kdniao_id"
              type="text"
              name="title"
              id="title"
              value
              class="input-txt"
            />
            <span class="err" id="err_title"></span>
            <p class="notic">快递鸟 id</p>
          </dd>
        </dl>
        <dl class="row" v-if="form.express_switch == 1">
          <dt class="tit">
            <label>API key</label>
          </dt>
          <dd class="opt">
            <input
              v-model="form.kdniao_key"
              type="text"
              name="title"
              id="title"
              value
              class="input-txt"
            />
            <span class="err" id="err_title"></span>
            <p class="notic">快递鸟API key</p>
          </dd>
        </dl>
        <dl class="row" v-if="form.express_switch == 1">
          <dt class="tit">
            <label>快递客户号</label>
          </dt>
          <dd class="opt">
            <input
              v-model="form.kdniao_customer_name"
              type="text"
              name="title"
              id="title"
              value
              class="input-txt"
            />
            <span class="err" id="err_title"></span>
            <p class="notic">快递客户号</p>
          </dd>
        </dl>
        <dl class="row" v-if="form.express_switch == 1">
          <dt class="tit">
            <label>快递客户密码</label>
          </dt>
          <dd class="opt">
            <input
              v-model="form.kdniao_customer_pwd"
              type="text"
              name="title"
              id="title"
              value
              class="input-txt"
            />
            <span class="err" id="err_title"></span>
            <p class="notic">快递客户密码</p>
          </dd>
        </dl>
        <dl class="row" v-if="form.express_switch == 1">
          <dt class="tit">
            <label>说明</label>
          </dt>
          <dd class="opt">
            <a href="http://www.kdniao.com/" target="_blank">点击申请查看</a>
          </dd>
        </dl>
        <dl class="row" v-if="form.express_switch == 1">
          <dt class="tit">
            <label>测试快递鸟</label>
          </dt>
          <dd class="opt">
            <el-select v-model="form.shipping_n_code" size="mini" placeholder="请选择快递公司">
              <el-option label="请选择快递公司" value="0"></el-option>
              <el-option label="顺丰快递(SF)" value="SF"></el-option>
              <el-option label="圆通快递(YTO)" value="YTO"></el-option>
              <el-option label="韵达快递(YD)" value="YD"></el-option>
              <el-option label="中通快递(ZTO)" value="ZTO"></el-option>
              <el-option label="百世汇通快递(HTKY)" value="HTKY"></el-option>
            </el-select>
            <input v-model="invoice_no" class="input-txt" type="text" placeholder="请填写物流单号" />
            <input value="测试" class="input-btn" @click="getExpress()" type="button" />
          </dd>
        </dl>

        <dl class="row">
          <dt class="tit">
            <label>物流信息测试结果</label>
          </dt>
          <dd class="opt" v-if="form.express_switch == 0">
            <div class="wuliumess" v-if="express_info.status == '200'">
              <div v-for="mess in express_info.data">
                <i class="yg"></i>
                <p class="naem">{{mess.context}}</p>
                <p class="time">
                  <span>{{mess.ftime}}</span>
                </p>
              </div>
            </div>
            <div class="wuliumess" v-if="express_info.returnCode == '500'">
              <i class="yg"></i>
              <p class="naem">{{express_info.message}}</p>
            </div>
          </dd>

          <dd class="opt" v-if="form.express_switch == 1">
            <div class="wuliumess" v-if="express_info.State == 3">
              <div v-for="mess in express_info.Traces">
                <i class="yg"></i>
                <p class="naem">{{mess.AcceptStation}}</p>
                <p class="time">
                  <span>{{mess.AcceptTime}}</span>
                </p>
              </div>
            </div>
            <div class="wuliumess" v-if="express_info.State == 0">
              <i class="yg"></i>
              <p class="naem">{{express_info.Reason}}</p>
            </div>
			<div class="wuliumess" v-if="!express_info.Success">
			  <i class="yg"></i>
			  <p class="naem">{{express_info.Reason}}</p>
			</div>
          </dd>
        </dl>

        <div class="bot">
          <a @click="onSubmit()" class="ncap-btn-big ncap-btn-green">确认提交</a>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      invoice_no: "",
      express_info: {}
    };
  },
  components: {},
  created() {
    this.getConfigs();
  },
  methods: {
    getConfigs() {
      var that = this;
      this.request
        .get("/mall/configs", {
          params: {
            inc_type: "express"
          }
        })
        .then(function(res) {
          that.form = res.express;
        });
    },
    getExpress() {
      var that = this;
      let code = "";
      if (this.form.express_switch == 0) {
        code = this.form.shipping_code;
      }
      if (this.form.express_switch == 1) {
        code = this.form.shipping_n_code;
      }
      this.request
        .get("order/delivery_doc/express", {
          params: {
            shipping_code: code,
            invoice_no: that.invoice_no
          }
        })
        .then(function(res) {
          that.express_info = res;
        });
    },
    onSubmit() {
      var that = this;
      this.request.put("/mall/configs/express", that.form).then(function(res) {
        if (res.status == 1) {
          that.$message({
            message: "保存成功",
            type: "success"
          });
        } else {
          that.$message({
            showClose: true,
            message: "保存失败,失败原因:" + res.msg,
            type: "error"
          });
        }
      });
    }
  }
};
</script>
<style scoped>
</style>
